<template>
  <!-- 遮罩层 -->
  <transition name="fade" appear>
    <div
      v-show="show"
      @click="handleMaskClick"
      class="mask fixed left-0 top-0 w-screen h-screen bg-black opacity-30 z-50"
    ></div>
  </transition>
  <!-- 弹出框 -->
  <transition name="slide" appear>
    <div
      v-show="show"
      :style="{
        top: top + 'px'
      }"
      :class="['fixed right-0 h-screen z-50', width]"
    >
      <ul
        class="overflow-y-scroll bg-white/10 dark:bg-white/10 backdrop-blur-lg h-full animate__animated animate__fadeInRight"
      >
        <li
          @click="handleNavItemClick(index, item)"
          class="font-sans text-sm font-medium leading-relaxed text-gray-900 p-3 shadow-m transition duration-200"
          v-for="(item, index) in renderList"
          :key="index"
          :class="{
            'bg-blue-200': index === currentIndex,
            'bg-white/80  backdrop-blur-3xl': index !== currentIndex
          }"
        >
          <template v-if="item.icon">
            <i :class="item.icon"></i>
          </template>
          {{ item.category }}
        </li>
      </ul>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  renderList: {
    type: Array,
    default: []
  },
  width: {
    type: String,
    default: 'w-3/5'
  },
  currentIndex: {
    type: Number,
    default: 0
  },
  top: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['changeShowSideStatus', 'changeCurrentActiveIndex'])

const handleMaskClick = () => {
  //点击后弹出或者隐藏侧边栏
  emit('changeShowSideStatus')
}

const handleNavItemClick = (index, item) => {
  //点击侧边栏中的数据后高亮显示
  emit('changeCurrentActiveIndex', index, item)
}
</script>

<style lang="scss" scoped>
/* 遮罩淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 1s ease;
}
.slide-enter {
  transform: translateX(100%); /* 初始位置：屏幕右侧 */
}
.slide-enter-to {
  transform: translateX(0); /* 最终位置：原点 */
}
.slide-leave {
  transform: translateX(0); /* 离开初始位置 */
}
.slide-leave-to {
  transform: translateX(100%); /* 离开最终位置：屏幕右侧 */
}
</style>
